<template>
  <div>
    <van-nav-bar
      class="custom-nav-bar"
      left-arrow
      @click-left="onClickLeft"
      left-text="动态详情"
    >
      <template #right>
        <van-icon name="share-o" font-size="18" class="custom-icon"></van-icon>
      </template>
    </van-nav-bar>
    <div class="user-profile">
      <img :src="user.headpic" />
      <div class="user-info">
        <b>{{ user.uname }}</b>
        <!-- <p>北京市</p> -->
      </div>
      <span class="follow-btn">{{ share.time }}</span>
    </div>
    <div class="hanzi-container">
      <div class="wenzi">
        <b>{{ share.title }}</b>
        <p class="hanzi-p">{{ share.detail }}</p>
      </div>
      <div class="image-container">
        <img
          class="share-img"
          v-for="(item, i) in share.pic"
          :key="i"
          :src="item"
          alt=""
        />
      </div>
      <!-- <div class="vertical">
                <div class="vertical-p">
                    <p>完成户外跑步10.8公里,1小时5分0秒</p>
                    <p>完成 <span style="color:#090;font-size:22px">南护城河跑道</span> </p>
                    <p>开启跑步实况</p>
                </div>
            </div> -->
      <div class="parent-div">
        <div class="left-div">
          <span>{{ comments ? comments.length:0 }} 评论</span>
        </div>
        <div class="right-div"><span>按推荐 </span> | <span> 按时间</span></div>
      </div>

      <div class="comment">
        <div class="comment-content" v-for="item in comments" :key="item.id">
          <img :src="item.headpic" alt="" />
          <div class="review">
            <p class="comment-title">{{ item.uname }}</p>
            <p class="comment-info">{{ item.content }}</p>
            <div class="comment-time">
              <span class="time">{{ item.time }}</span
              >&nbsp;·&nbsp;<span> 河南 </span><span>回复</span>
            </div>
          </div>
        </div>
      </div>

      <div class="gao"></div>
      <div class="footer-container">
        <div class="search-container">
          <!-- <van-icon name="search" class="search-icon"></van-icon> -->
          <input
            type="text"
            v-model="xiaoxi"
            placeholder="说点什么吧"
            class="search-input"
          />
        </div>
        <div class="tubiao">
          <van-badge :content="5" color="red">
            <van-icon name="chat-o" size="25" />
          </van-badge>
        </div>
        <div class="tubiao">
          <van-badge color="red">
            <van-icon name="share-o" size="25" />
          </van-badge>
        </div>
        <div class="tubiao">
          <van-badge color="red">
            <van-icon name="upgrade" size="25" @click="fasong" />
          </van-badge>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "@/http";
import storage from "@/utils/Storage";
import moment from "moment";
import httpApi from "@/http";
import { Toast } from 'vant';

export default {
  data() {
    return {
      id: this.$route.params.id,
      uid: storage.get(storage.KEY_USER).uid,
      share: {
        detail: "",
        pic: [],
        sid: "",
        title: "",
        uid: "",
        time: "",
      },
      xiaoxi: "",
      comments: [],
      user: {
        headpic: "",
        uname: "",
      },
    };
  },
  methods: {
    // 上传评论
    fasong() {
      if (this.xiaoxi) {
        let time = new Date().getTime();
        let params = {
          uid: this.uid,
          sid: this.share.sid,
          content: this.xiaoxi,
          time,
        };
        console.log(params);

        axios.commentApi.commentAddShare(params).then((res) => {
          console.log(res);
          this.commentList();
          this.xiaoxi = "";
        });
      }else{
        Toast('内容不能为空')
      }
    },
    commentList() {
      axios.commentApi.commentByShareId({ sid: this.id }).then((res) => {
        console.log("评论", res);
        this.comments = res.data.data;
        if (this.comments) {
          this.comments.reverse();
          this.comments.forEach((el) => {
            el.time = moment(parseInt(el.time)).format("YYYY-MM-DD HH:mm");
          });
        }

        // console.log(this.comments);
      });
    },

    onClickLeft() {
      this.$router.push("/home/find");
    },
  },
  mounted() {
    this.commentList();
    // console.log(this.id);
    axios.shareApi.shareById({ sid: this.id }).then((res) => {
      console.log("100", res);
      this.share.detail = res.data.data[0].detail;
      this.share.sid = res.data.data[0].sid;
      this.share.title = res.data.data[0].title;
      this.share.uid = res.data.data[0].uid;
      this.share.time = moment(parseInt(res.data.data[0].time)).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      // console.log(this.share.pic);
      console.log(this.share.uid);

      let arr = [];
      res.data.data.forEach((el, i) => {
        arr.push(el.pic.split(","));
      });
      // console.log(typeof arr, arr[0]);
      this.share.pic = arr[0];

      httpApi.shareApi.shareUserByUid({ uid: this.share.uid }).then((res) => {
        console.log("user", res);
        this.user.headpic = res.data.data[0].headpic;
        this.user.uname = res.data.data[0].uname;
      });
    });
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar__left {
  left: -9px;
}

::v-deep .van-nav-bar .van-icon {
  color: black;
}

::v-deep .van-nav-bar__text {
  color: #000;
}

.custom-nav-bar {
  color: black;
  /* 设置文字颜色为黑色 */
}

.custom-icon {
  color: black;
  /* 设置图标颜色为黑色 */
}

.user-profile {
  display: flex;
  align-items: center;
  padding: 10px;
}

.user-profile img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.user-info {
  margin-left: 10px;
  margin-top: 2px;
}

.follow-btn {
  margin-left: auto;
  width: 70px;
  // padding: 5px 10px;
  color: #999;
  font-size: 12px;
  border: none;
}

.hanzi-container {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  margin-bottom: 10px;

  //   margin-left: 8px;
  .wenzi {
    margin-left: 8px;
  }
}

.hanzi-container b {
  margin-left: 0;
}

.hanzi-container .hanzi-p {
  margin-top: 20px;
  margin-bottom: 10px;
  // font-size: 18px;
  text-indent: 2em;
}

.image-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  justify-content: space-between;
  padding: 0 10px;
}

.share-img {
  width: 49%;
  margin-bottom: 5px;
  object-fit: cover;
  //   height: 100%;
  border-radius: 10px;
}

.vertical {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  margin-left: 8px;
  background-color: #e7e5d0;
  width: 95%;
  border-radius: 10px;
}

.vertical-p {
  // border-radius: 10px;
  padding: 10px;
}

.footer-container {
  display: flex;
  align-items: center;
}

.search-container {
  position: relative;
  margin-left: 8px;
  margin-top: 5px;
}

.search-icon {
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
}

.search-input::placeholder {
  padding-left: 20px;
}

.search-input {
  padding: 0 10px;
  border-radius: 40px;
  width: 140px;
  height: 30px;
  text-indent: 12px;
  background-color: #eee;
  border: white;
}

.tubiao {
  margin-top: 12px;
  margin-left: 40px;
}

.child {
  width: 40px;
  height: 40px;

  border-radius: 4px;
  margin-left: 10px;
}

.footer-container {
  display: flex;
  position: fixed;
  bottom: 0;
  /* 其他样式 */
  width: 100%;
  padding-bottom: 1vh;
  background-color: #fff;
}

.comment-content {
  display: flex;
  align-items: center;
  padding-bottom: 5px;
  margin-left: 10px;
}

.comment-content img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.review {
  margin-left: 12px;
  display: flex;
  flex-direction: column;
}

::v-deep .comment-title {
  font-size: 10px;
  margin-top: 8px;
  //   font-weight: bold;
  //   margin-bottom: 3px;
}

::v-deep .comment-info {
  font-size: 14px;
  margin-top: 8px;
  //   margin-left: 5px;
  font-weight: bold;
}

.comment-time {
  font-size: 12px;
  color: #999;
  display: flex;

  align-items: center;
}

.comment-time span {
  margin-right: 5px;
}

.gao {
  width: 100%;
  height: 40px;
}

.parent-div {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding: 15px;
}

.left-div span {
  font-size: 16px;
}

.right-div span {
  font-size: 14px;
  margin-left: 10px;
}
</style>
